<template>
	<view class="login">
	
		<!-- <h4>用户登录</h4> -->
		<view class="tittle">
		<text >用户登录</text>
		</view>
		<!-- 图片 -->
		<image class="titleImg" src="../../static/VersionUpdate/logo.jpg" mode=""></image>
		<!-- 输入框 -->
		<view class="box">
			<view class="input">
				<image class="id" src="../../static/bc/me.png" mode=""></image>
				<input type="text" v-model="id" placeholder="请输入手机号">
			</view>
			<view class="input">
				<image class="world" src="../../static/bc/pass.png" mode=""></image>
				<input type="password" v-model="pass" placeholder="请输入密码">
			</view>
		</view>
		<!-- 便捷操作 -->
		<view class="pass">
			<!-- 记住密码 -->
			<!-- <view class="cri"></view> -->
				<label>
					<radio :checked="getPass1" class="round" @click="radioClick" /><text>记住密码</text>
				</label>
			<!-- 用户操作 -->
			<view class="pa">
			<text @click="miss">忘记密码</text>
			<text @click="register">新用户注册</text>
			</view>
		</view>
		<button @click="go">登录</button>
		
	</view>
</template>

<script>
	import api from '../../common/api.js'
	export default{
		data(){
			return{
				id:'',
				pass:'',
				getPass1:false
			}
		},
		methods:{
			radioClick() {
				this.getPass1 = !this.getPass1
			},
				// 登录
			go(){
				// 账号密码 不为空
				if(this.id && this.pass){
					this.$api.sendRequest({
						url: api.LOGIN_user,
						data: {
							account:this.id,
							password:this.pass
						},
						success: res => {
							
							console.log(res);
							if(res.code==0){
								uni.showModal({
									title:res.msg
								})
							}else{
								this.getPass()
								// 跳转的地址
								this.$store.commit('setIstoken', res.data.userinfo.token)
								uni.setStorage({
									key:'token',
									data:res.data.userinfo.token
								})
								uni.setStorage({
									key:'userId',
									data:res.data.userinfo.user_id
								})
								uni.setStorage({
									key:'userDate',
									data:res.data.userinfo
								})
								let tel = res.data.userinfo.mobile.replace(/([0-9]{3})([0-9]{4})([0-9]{4})/, '$1****$3')
								uni.setStorage({
									key:'encryptionTel',
									data:tel
								})
								
								// uni.setStorage({
								// 	key:'id',
								// 	data:res.data.userinfo.username
								// })
								uni.switchTab({
									url:'../../pages/home/home'
								})
							}
						}
					});
				}else{
					uni.showToast({
						title:'请输入账号或密码',
						icon:'none'
					})
				}
				
			},
				//  注册
			register(){
				uni.navigateTo({
					url:'/pages/logon/logon'
				})
			},
			//  忘记密码
			miss(){
				
				uni.navigateTo({
					url:'../../pages/pass/pass'
				})
			},
			getPass(){
				if(this.getPass1){
					uni.setStorage({
						key:'id',
						data:this.id.toString()
					})
					uni.setStorage({
						key:'pass',
						data:this.pass
					})
				} else {
					uni.removeStorageSync('id')
					uni.removeStorageSync('pass')
				}
			}
			
		},
		mounted() {
			let id = uni.getStorageSync('id')
			let pass = uni.getStorageSync('pass')
			if(id && pass) {
				this.getPass1 = true
				this.id = id
				this.pass = pass
			}
		}
	}
</script>

<style scoped>
	.round {
		transform: scale(0.8);
	}
	.box{
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.input {
		display: flex;
		flex-direction: row;
	}
	.input>image{
		width: 32rpx;
		height: 40rpx;
		margin-top: 70rpx;
		padding-left: 60rpx;
	}
	.titleImg{
		width: 240rpx;
		height: 210rpx;
		margin: 100rpx auto;
		position: relative;
		left: calc(50% - 120rpx);
		display: inline-block;
		box-shadow: 0 0 10rpx 6rpx rgba(0,0,0,.05);
	}
	.tittle{
		text-align: center;
		padding-top: 60rpx;
		font-weight: 800;
	}
	input{
		border-bottom: 2rpx solid #e7e7e7;
		opacity: .6;
		width: 80%;
		height: 100rpx;
		margin: 40rpx auto;
		font-size: 1em;
		color: #7C7C7C;
		}
	
		
		.pass{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			color: #007AFF;
			padding-left: 50rpx;
		}
		
		.pa>text{
			margin: 0 20rpx;
			color: #007AFF;
		}

		
		button{
			margin: 88rpx auto;
			width: 90%;
			border-radius: 50rpx;
			background-color: #207DFE;
			color: #FFFFFF;
		}
</style>
